Teknik Tampilan Data 
Menggunakan Data T able 


3.1 Apa Itu DataTable? 


Pernahkah Anda kesulitan dalam membuat suatu tampilan data 
interaktif beserta pengaturan tata letak dan fungsi paging?.. Jika iya, 
maka ini dia solusi interaktif, simpel, mujarab, bombastis, disukai 
klien, dan yang pasti akan menghemat waktu dan pekerjaan Anda 
hingga 300%.. yah.. DataTable! 


DataTable adalah salah satu plugin dari j@uery. DataTable digu- 
nakan untuk menampilkan data dalam bentuk grid (tabel). 
DataTable memiliki banyak fitur-fitur interaktif, di antaranya: 


e Searching (pencarian data) 

e Paging (halaman) 

e Sorting (mengurutkan data berdasarkan header kolom) 

e Batas tampilan data per halaman dalam bentuk combobox. 
Saat ini, DataTable banyak sekali digunakan oleh para developer 
dalam menyusun tabel data. Menariknya, DataTable memiliki theme, 


jadi kita tidak usah takut kalau kita merasa bosan.. tampilan ciamik 
dari datatable dijamin tidak akan bikin bosan. 
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Anda bisa mengunjungi situs http://www.datatables.net untuk detail- 
nya. 


3.2 Sample dan Source 


Penulis akan memberikan contoh simpel. Secara awam, kita me- 
ngenal perintah tag html dalam membuat tabel.. Yah, menggunakan 
<table>. Contohnya: 


<table> 

<tr> 
h>No</th> 
h>NIP</th> 
h>Nama</th> 
h>Perusahaan</th> 
h>Jabatan</th> 


AAAAA 


aaa 


</tr> 


<tr> 
th>1</th> 

th>20101001</th> 

th>Agus Saputra, S.Kom.</th> 
th>CV. ASFA Solution</th> 
th>Direktur</th> 


AMARA 


</tr> 


<tr> 
h>2</th> 

h>20101002</th> 

h>Sofyan Maulana, S.Kom.</th> 
h>PT. MitraComm Ekasarana</th> 
h>IT Supervisor</th> 


ANAAAAA 


aaa 


</tr> 


<tr> 
h>3</th> 

h>20101003</th> 

h>Feni Agustin, S.Kom.</th> 
h>CV. ASFA Solution</th> 
h>VP Operations</th> 


ANAAAAA 


aaa 


</tr> 
</table> 


Nah, jika Anda jalankan secara kasar seperti kode di atas, tanpa 
sentuhan css ataupun desain lainnya, penulis sampaikan, hasilnya 
juga akan kasar dan kurang enak untuk dilihat. Bisa Anda lihat pada 
Gambar 3.1. 
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No NIP Nama Perusahaan Jabatan 


1 20101001 Agus Saputra, S.Kom. CV. ASFA Solution Direktur 
2 20101002 Sofyan Maulana, S.Kom. PT. MitraComm Ekasarana IT Supervisor 
3 20101003 Feni Agustin, S.Kom. CV. ASFA Solution VP Operations 


Gambar 3.1 Hasil skrip yang belum diberi efek datatables 


Sekarang, kita akan coba implementasikan datatables ke dalam 
skrip di atas. 


Langkah pertama: 


Download plugin datatables dari url 
http://www.datatables.net/download/, lihat Gambar 3.2. 


W Donate ID Pownload B Boe Un : 
DataTables pa — j S f 


New Relic 


Usage Examples Styling API Development Editor Extras Plug-ins Blog FAQs Forums bro dd 


Download DataTables 
DataTables is open source software, free available for you to use and modify. The DataTables distribution include a wide 


range of examples, the source files (including compressed versions) and all first class plug-ins. Download using the 
button below: 


- aa 


New in v1.9 | Upgrade notes 


CDN 


DataTables is available on the Microsoft Ajax CDN. Using the CDN host DataTables is a great way of either guickly trying 
out DataTables, or for taking advantage of the benefits of using a CDN hosted library. This blog post has further 
information about using the CDN hosted DataTables. 


Gambar 3.2 Download plugin datatables 


Akan menampilkan kotak dialog, pilih untuk menyimpan dan klik 
OK. Lihat Gambar 3.3. 
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Opening DataTables-1.9.4.zip xj 
You have chosen to open: 


o DataTables-1.9.4.zip 


which is: IZArc ZIP Archive (2,3 MB) 
from: http://datatables.net 


What should Firefox do with this file? 


C Openwith |IZArc Archiver (default) v 


(+ Save File 


[Do this automatically for files like this from now on. 


Cancel 
LS 


Gambar 3.3 Kotak dialog download 


Hasil download di atas, Anda akan menemukan file berformat .zip. 
Silakan lakukan ekstraksi file tersebut menggunakan winzip ataupun 
winrar. Akan menghasilkan folder DataTables. Simpan ke dalam 
folder skrip yang akan kita buat. 


Langkah kedua: 


Lakukan edit pada file skrip yang telah dituliskan sebelumnya. 
Pertama, kita panggil terlebih dahulu plugin datatable yang dibu- 
tuhkan. 


<style type="text/css" title="currentStyle"> 

@import "DataTables/media/css/demo page.css"j 

@import "DataTables/media/css/demo table jui.css"; 

@import 
"DataTables/examples/examples support/themes/smoothness/jquery-ui- 
1.8.4.custom.css"; 

@import 
"DataTables/extras/TableTools/media/css/TableTools JUI.css"; 
</style> 


<script type-"text/javascript" charset-"utf-8" 
src="DataTables/media/js/jquery.js"></script> 


<script type="text/javascript" charset="utf-8" 
src="DataTables/media/js/jquery.dataTables.js"></script> 


<script type="text/javascript" charset="utf-8" 


src="DataTables/extras/TableTools/media/js/ZeroClipboard.js"></scri 
pt> 
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<script type-"text/javascript" charset-"utf-8" 
src="DataTables/extras/TableTools/media/js/TableTools.js"></script> 


Selanjutnya pada tag <table> kita sisihkan selektor id dan class. 
Perhatikan skrip yang tercetak tebal berikut. 


<table id="example" class="display"> 


Tambahkan juga tag <thead> dan </thead> pada tag judul kolom. 
Perhatikan skrip tercetak tebal. 


<thead> 
<tr> 
<th>No</th> 
<th>NIP</th> 
<th>Nama</th> 
<th>Perusahaan</th> 
<th>Jabatan</th> 
</tr> 
</thead> 


Tambahkan juga tag <tbody> dan </tbody> pada konten tabel. 
Perhatikan skrip yang tercetak tebal. 


<tbody> 

<tr> 
<td>1</td> 
<td>20101001</td> 
<td>Agus Saputra, S.Kom.</td> 
<td>CV. ASFA Solution</td> 
<td>Direktur</td> 

</tr> 

<tr> 
<td>2</td> 
<td>20101002</td> 
<td>Sofyan Maulana, S.Kom.</td> 
<td>PT. MitraComm Ekasarana</td> 
<td>IT Supervisor</td> 

</tr> 

<tr> 
<td>3</td> 
<td>20101003</td> 
<td>Feni Agustin, S.Kom.</td> 
<td>CV. ASFA Solution</td> 
<td>VP Operations</td> 

</tr> 

</tbody> 
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Jangan lupa, karena pada tag <table> kita memanggil selektor id, 
maka kita buat id untuk menjadikan seluruh konten tabel menjadi 
konten kesatuan tabel yang terdiri atas pencarian, sorting, paging, 
dan lain-lain. Tambahkan skrip berikut. 


<script type-"text/javascript" charset="utf-8"> 
S (document) .ready( function () { 
$('#example').dataTable( { 
"bJQueryUI": true, 
"sPaginationType": "full numbers" 
1); 
1); 
</script> 


Sampai saat ini, modifikasi skrip telah selesai, so.. untuk keseluruhan 
skrip bisa Anda lihat di bawah. 


<style type="text/css" title="currentStyle"> 

@import "DataTables/media/css/demo page.css"; 

@import "DataTables/media/css/demo table jui.css"; 

Qimport 
"DataTables/examples/examples support/themes/smoothness/jquery-ui- 
1.8.4.custom.css"; 

Qimport 
"DataTables/extras/TableTools/media/css/TableTools JUl.css"; 
</style> 


<script type="text/javascript" charset="utf-8" 
src="DataTables/media/js/jquery.js"></script> 

<script type="text/javascript" charset-"utf-8" 
src="DataTables/media/js/jquery.dataTables.js"></script> 

<script type="text/javascript" charset="utf-8" 
src="DataTables/extras/TableTools/media/js/ZeroClipboard.js"> 
</script> 

<script type="text/javascript" charset="utf-8" 
src="DataTables/extras/TableTools/media/js/TableTools.js"> 
</script> 

<script type-"text/javascript" charset="utf-8"> 


S (document) .ready( function () { 
$('#example').dataTable( { 
"bJQueryUI": true, 
"sPaginationType": 


"full numbers" 
1); 
1); 
</script> 


<table id="example" class="display"> 
<thead> 
<tr> 
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</tr> 


</thead> 


<tbody> 


<tr> 


</tr> 


<tr> 


</tr> 


<tr> 


</tr> 


</tbody> 


</table> 


<th>No</th> 

<th>NIP</th> 
<th>Nama</th 
<th>Perusaha 
<th>Jabatan< 


<td>1</td> 
<td>20101001 
<td>Agus Sap 


<td>Direktur 


<td>2</td> 
<td>20101002 


<td>Sofyan Maulana, 
<td>PT. MitraComm Ekasarana</td> 


<td>IT Super 


<td>3</td> 
<td>20101003 
<td>Feni Agu 


<td>VP Opera 


> 
an</th> 
/th> 


</td> 


utra, S.Kom.</td> 
<td>CV. ASFA Solution</td> 


</td> 


</td> 


visor</td> 


</td> 


stin, S.Kom.</td> 
<td>CV. ASFA Solution</td> 


tions</td> 


S.Kom.</td> 


Hasilnya akan menampilkan konten tabel seperti pada Gambar 3.4. 


Ar refox y | 


| [EJ http://localhost/com...ofile/datatable.php | + | 


€ @ localhost/company_profi 


Jai 


datatable.php 


lost Visite: etting Starte: tS Intitled Document © raigslist Alerts A gu acebool onnecting... > 
(Ph Most Visited @ Getting Started |} Untitled D Craigslist Al Q gu Ei Facebook Ej C g- $ 15 


Show|10 | entries 


Now NIP 
1 20101001 
2 20101002 
3 20101003 


o 


Nama $ 


Agus Saputra, S.Kom. 
Sofyan Maulana, S.Kom. 
Feni Agustin, S.Kom. 


Showing 1 to 3 of 3 entries 


Search: 
Perusahaan > Jabatan > 
CV. ASFA Solution Direktur 
PT. MitraComm Ekasarana IT Supervisor 
CV. ASFA Solution VP Operations 


evious 


Gambar 3.4 Konten tabel menggunakan datatables 


@|[&- Amazoncom P| Or & A e|- 
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